/**
 * Created by szhua on 2015/10/20.
 */

var user=JSON.parse(localStorage.getItem(getParameterByName("username")));


if(user) {

/*    var newPage = [
        '<div data-role="page" data-url="details" data-add-backbtn="true" >',
        '<div data-role="header">',
        '<a href="index.html">back</a>',
        '<h1>myAlbum</h1>',
        '<a id="btnDelete" data-href="ID" datarole="button" class="ui-btn-right">Delete</a> ',
        '</div>',
        '<div data-role="content" id="content">',
        '<div id="photoWall"></div>',
        /!*  '<div id="selectedPic">',
         '<div id="cancel">乂</div>',
         '<div id="last">上一张</div>',
         '<div id="next">下一张</div>',
         '<div id="pic"></div>',
         '</div>',*!/
        '</div>'
    ].join('');
    newPage = $(newPage);
    newPage.html(function (index, old) {
        return old
            .replace(/ID/g, "myAlbum")
            .replace(/Title/g, "myAlbum"
                .replace(/-/g, ' '))
            .replace(/NOTE/g, "myAlbum")
    }).appendTo($.mobile.pageContainer);
    $.mobile.changePage(newPage, {transition: "slideup"});*/
/*    var photo = {};
    (function (app) {
        app.smallImg = new Array();
        app.smallImg = ["img/thumb/1.jpg", "img/thumb/2.jpg", "img/thumb/3.jpg", "img/thumb/4.jpg", "img/thumb/5.jpg", "img/thumb/6.jpg", "img/thumb/7.jpg", "img/thumb/8.jpg", "img/thumb/9.jpg", "img/thumb/10.jpg", "img/thumb/11.jpg", "img/thumb/12.jpg", "img/thumb/13.jpg", "img/thumb/14.jpg", "img/thumb/15.jpg", "img/thumb/16.jpg", "img/thumb/17.jpg", "img/thumb/18.jpg", "img/thumb/19.jpg", "img/thumb/20.jpg", "img/thumb/21.jpg", "img/thumb/22.jpg", "img/thumb/23.jpg", "img/thumb/24.jpg", "img/thumb/25.jpg", "img/thumb/26.jpg", "img/thumb/27.jpg", "img/thumb/28.jpg", "img/thumb/29.jpg", "img/thumb/30.jpg"];;
        app.currImg = -1;
        app.minHeight = [0];

        app.loadImg = function () {
            for (var i = 0; i < app.smallImg.length; i++) {
                $("#photoWall").append("<img src='" + app.smallImg[i] + "'/>").trigger("create");
                if ($("#photoWall img")[i].width < 135) {
                    $($("img")[i]).addClass("img_style_2");
                }
            }
        }

        app.init = function (albumIdx) {
            //app.smallImg=user.albList[albumIdx][1];
            var pic = $("#photoWall img");
            for (var i = 0; i < pic.length; i++) {
                $(pic[i]).data("positionId", i);
            }
        }

        app.addImgToPic = function (index) {
            var pic = $("#pic");
            pic.empty();
            var imgList = $("img");
            for (var i = 0; i < imgList.length; i++) {
                var temp = imgList[i];
                if (index == $(temp).data("positionId")) {
                    if (temp.height > 200) {
                        pic.append("<img id='bigImg' class='pic_style_2' src='img/" + temp.src.substring(45) + "'/>");
                    } else {
                        pic.append("<img id='bigImg' class='pic_style_1' src='img/" + temp.src.substring(45) + "'/>");
                    }
                    break;
                }
                ;
            }

            $("#selectedPic").css("display", "block");
            pic.css("display", "block");
        }

        app.getMinHeightIdx = function () {
            var index = 0;
            var temp = app.minHeight[0];
            for (var i = 1; i < app.minHeight.length; i++) {
                if (app.minHeight[i] < temp) {
                    index = i;
                    temp = app.minHeight[i];
                }
            }
            return index;
        }

        app.setLayout = function () {
//                    var content=$("div").data("role","content");
//                    console.log(content);
            var pic = $("#photoWall img");
            var unitWidth = pic[0].offsetWidth;
            var colsNum = Math.floor(document.documentElement.clientWidth / unitWidth);
            var remainder = document.documentElement.clientWidth % unitWidth;
            $("#photoWall").css("margin-left", remainder / 2 - 5);

            for (var i = 0; i < pic.length; i++) {
                if (i < colsNum) {
                    app.minHeight[i] = pic[i].offsetHeight;
                    $(pic[i]).css({"left": unitWidth * i - 10, "top": 0});
                    continue;
                }
                var minHeightIdx = app.getMinHeightIdx();
                $(pic[i]).css({"left": unitWidth * minHeightIdx - 10, "top": app.minHeight[minHeightIdx]});
                app.minHeight[minHeightIdx] += pic[i].offsetHeight;

            }
        }

        app.registerClickEvent = function () {
            $("img").click(function (e) {
//                        e.preventDefault();
                var index = $("img").index(this);
                app.currImg = $($("img")[index]).data("positionId");
                app.addImgToPic(app.currImg);
            });

            /!*  $("#selectedPic").click(function(){
             $("#selectedPic").css("display","none");
             $("#pic").css("display","none");
             });*!/

            $("#last").click(function () {
                if (app.currImg != 0) {
                    app.addImgToPic(--app.currImg);
                }
            });

            $("#next").click(function () {
                if (app.currImg != img.length - 1) {
                    app.addImgToPic(++app.currImg);
                }
            });
            $("#cancel").click(function () {
                $("#selectedPic").css("display", "none");
                $("#pic").css("display", "none");
            });

//                    $("#bigImg").bind("swipeleft",function(){
//                        if(!(app.currImg==1)){
//                            app.addImgToPic(app.currImg-1);
//                        }
//                    });
//                    $("#bigImg").bind("swiperight",function(){
//                        if(!(app.currImg==img.length)){
//                            app.addImgToPic(app.currImg+1);
//                        }
//                    app});

        }


    })(photo);*/
    $(function () {

        var album = {};

        (function (app) {

            app.albList = new Array();

            app.init = function () {
                app.albList = user.albList;
                if (!app.albList) {
                    app.albList = new Array();
                }
                app.refeshListView();
                app.registerEvent();

            }

            app.addAlbum = function () {
                $("#addAlb").click(function () {

                    var albumName = $("#albumName").val();
                    var album = new Array();
                    album.push(albumName);
                    app.albList.push(album);
                    user.albList = app.albList;
                    localStorage.setItem(user.name, JSON.stringify(user));
                    app.refeshListView();
                    app.registerEvent();

                });
            };

            app.refeshListView = function () {
                var listView = $("#listview");
                if (app.albList.length > 0) {
                    listView.empty();
                    for (var i = 0; i < app.albList.length; i++) {
                        listView.append("<li><a data-ajax='false' class='myAlbum' data-album='" + i + "'>" + app.albList[i][0] + "</a></li>");
                    }
                } else {
                    listView.empty();
                    listView.append('<li style="text-align:center;">空相册</li>');

                }
                $("#listview").listview('refresh');
            }

            app.registerEvent = function () {

                $(".myAlbum").click(function (e) {

                    e.preventDefault();
                    var albumIdx = $(this).data("album");
                    window.location.href="camera.html?username="+user.name+"&album="+albumIdx;
                });

            /*    $("#addAlbum").click(function(){
                    if ($("#myPopup").css("display") == "none") {

                        $("#myPopup").css("display", "block");
                    } else {
                        $("#myPopup").css("display", "none");
                    }
                })*/
                $("#listview").bind("taphold",function(){

                })

            }

            app.init();
            app.addAlbum();

        })(album)


    })


}
